<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filterFrom">
        <el-form-item>
          <label>是否失效</label>
          <el-select v-model="filterFrom.disable">
            <el-option label="全部" value=""></el-option>
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">确定</el-button>
        </el-form-item>
        <div class="pull-right">
          <el-button type="primary" icon="plus" @click="handleAdd">增加条幅</el-button>
        </div>
      </el-form>
      </h1>
    </div>
    <div class="card-body card-padding">
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading" border>
        <el-table-column type="expand" width="40">
          <template scope="scope">
            <img :src="scope.row.image_url" style="float: left;max-width:100px;height:75px;" />
            <div style="float: left;margin-left: 10px">
              <dl class="dl-horizontal">
                <dt>跳转Id：</dt>
                <dd>{{scope.row.jump_id}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>跳转网址：</dt>
                <dd>{{scope.row.jump_url}}</dd>
              </dl>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="70"></el-table-column>
        <el-table-column prop="title" label="显示名称" width="250"></el-table-column>
        <el-table-column :formatter="typeFormatter" label="类别" width="100"></el-table-column>
        <el-table-column :formatter="disableFormatter" label="是否失效" width="120"></el-table-column>
        <el-table-column prop="sort" label="排序号" width="120"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" type="primary" @click="handldEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="primary" @click="handldDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div style="float: left;margin-left: 20px;">
          <el-button type="text" @click="fetchData"><i class="zmdi zmdi-refresh" />&nbsp;&nbsp;重新加载</el-button>
        </div>
        <el-pagination :current-page="filterFrom.pnum" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.records" layout="sizes, prev, pager, next, jumper,total" :total="totalRecords" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="广告条幅编辑" v-model="showDialog" :close-on-click-modal="false">
      <el-form :model="curBanner" label-width="80px">
        <el-form-item label="显示名称">
          <el-input v-model="curBanner.title"></el-input>
        </el-form-item>
        <el-form-item label="显示图片">
          <el-input v-model="curBanner.image_url"></el-input>
          <el-upload class="uploader" v-bind:action="uploadUrl" :show-file-list="false" :on-success="handleUploadScucess" :before-upload="handleUploadBefore" :on-error="handleUploadError">
            <img v-if="curBanner.image_url" :src="curBanner.image_url" class="titleImage">
            <i v-else class="el-icon-plus uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序序号">
          <el-input v-model="curBanner.sort"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <el-select v-model="curBanner.type">
            <el-option label="无跳转" v-bind:value="0"></el-option>
            <el-option label="外部地址" v-bind:value="1"></el-option>
            <el-option label="活动" v-bind:value="2"></el-option>
            <el-option label="课程" v-bind:value="3"></el-option>
            <el-option label="资讯" v-bind:value="4"></el-option>
            <el-option label="名师" v-bind:value="5"></el-option>
            <el-option label="视频" v-bind:value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跳转ID">
          <el-input v-model="curBanner.jump_id"></el-input>
        </el-form-item>
        <el-form-item label="跳转地址">
          <el-input v-model="curBanner.jump_url"></el-input>
        </el-form-item>
       <el-form-item label="是否失效">
          <el-select v-model="curBanner.disable">
            <el-option label="否" v-bind:value="0"></el-option>
            <el-option label="是" v-bind:value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click.stop="handldSave">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '../api'
  import utils from '../utils'

  var filterFrom = {
    pnum: 1,
    records: 5,
    disable: ''
  }
  var message = ''

  export default {
    data: function () {
      return {
        curBanner: {},
        showDialog: false,
        isLoading: false,
        tableData: [],
        totalRecords: 0,
        filterFrom,
        datePickerOption: {
          disabledDate: function (time) {
            return time.getTime() > Date.now()
          }
        }
      }
    },
    computed: {
      uploadUrl: function () {
        return API.fileUploadUrl
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.records = val
        this.fetchData()
      },
      handlePageChange: function (val) {
        this.filterFrom.pnum = val
        this.fetchData()
      },
      handleUploadBefore: function (file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('不能超过 2MB!')
        }
        message = this.$message({
          duration: 0,
          message: '正在上传数据……',
          iconClass: 'zmdi zmdi-spinner icon-spin'
        })
        return isLt2M
      },
      handleUploadError: function () {
        if (message) {
          message.close()
          message = ''
        }
        this.$message.error('上传文件失败')
      },
      handleUploadScucess: function (response, file) {
        this.curBanner.image_url = response.data.path
        if (message) {
          message.close()
          message = ''
        }
      },
      handleAdd: function () {
        this.showDialog = true
        this.curBanner = {
          'id': '',
          'name': '',
          'image_url': '',
          'jump_id': '',
          'jump_url': '',
          'disable': '',
          'sort': '',
          'type': ''
        }
      },
      // 编辑
      handldEdit: function (selectData) {
        this.showDialog = true
        this.curBanner = utils.object.deepClone(selectData)
      },

      handldSave: function () {
        API.bannerSave(this.curBanner,
          (data) => {
            if (!data) return
            this.fetchData()
            this.showDialog = false
          }
        )
      },

      handldDelete: function (SelectData) {
        this.$confirm('你将删除该顶部条幅广告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          API.bannerDelete({ id: SelectData.id },
            (data) => {
              if (!data) return
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      fetchData: function () {
        this.isLoading = true
        API.bannerList(this.filterFrom,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.tableData = data.list
            this.totalRecords = data.totalRecords
          }
        )
      },
      typeFormatter: function (row) {
        switch (row.type) {
          case 0: return '无跳转'
          case 1: return '外部地址'
          case 2: return '活动'
          case 3: return '课程'
          case 4: return '资讯'
          case 5: return '名师'
          case 6: return '视频'
          default: return ''
        }
      },
      disableFormatter: function (row) {
        return row.disable === 1 ? '是' : '否'
      }
    }
  }

</script>

<style scoped>
  dt {
    font-weight: normal
  }

  .titleImage {
    height: 86px;
    width: 116px;
  }

  .uploader {
    height: 90px;
    width: 120px;
    border-radius: 3px;
    border: 2px solid #eee;
    text-align: center;
    color: #4db3ff;
  }

  .uploader:hover {
    border: 2px solid #4db3ff;
    cursor: pointer;
  }

  .uploader-icon {
    margin-top: 30px;
    font-size: 25px;
  }

</style>
